<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul,
        li {
            list-style: none;
        }

        #product {
            width: 1110px;
            margin: 50px auto;
        }

        #product li {
            width: 200px;
            height: 323px;
            border: solid 1px #ccc;
            margin-right: 20px;
            margin-bottom: 20px;
            float: left;
        }

        #product li img {
            width: 100%
        }

        #product li h6 {
            font-size: 20px;
            line-height: 20px;
            padding: 10px 0 10px 20px;
            font-weight: bold;
        }

        #product li span {
            display: block;
            font-size: 18px;
            font-weight: bold;
            padding: 0 0 10px 20px;
            color: rgb(233, 52, 163)
        }

        #product li p {
            font-size: 16px;
            padding: 0 0 10px 20px;
            color: #ccc
        }
    </style>
</head>

<body>
    <input type="button" value="按价格排序" id="price">
    <input type="button" value="按销量排序" id="sale">
    <input type="button" value="按评价排序" id="pingjia">
    <ul id="product">

    </ul>
</body>
<script>
    var data = [{
        id: '001',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5899.00,
        sale: 5888.00,
        color: '土豪金',
        evaluate: 288,
        sales: 1230
    }, {
        id: '002',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3899.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 289,
        sales: 439
    }, {
        id: '003',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 438,
        sales: 908
    }, {
        id: '004',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5999.00,
        sale: 5808.00,
        color: '土豪金',
        evaluate: 223,
        sales: 986
    }, {
        id: '005',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3892.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 88,
        sales: 8798
    }, {
        id: '006',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1929.00,
        sale: 1099.00,
        color: '白色',
        evaluate: 2088,
        sales: 453
    }, {
        id: '007',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 4899.00,
        sale: 2888.00,
        color: '土豪金',
        evaluate: 2880,
        sales: 88
    }, {
        id: '008',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 5876.00,
        sale: 998.00,
        color: '黑色',
        evaluate: 3288,
        sales: 99
    }, {
        id: '009',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 4999.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 1288,
        sales: 645
    }, {
        id: '010',
        name: 'iphone7 plugs',
        imgurl: 'img/ip7.jpg',
        price: 5888.00,
        sale: 2899.00,
        color: '土豪金',
        evaluate: 2288,
        sales: 34
    }, {
        id: '011',
        name: 'Note7',
        imgurl: 'img/note7.jpg',
        price: 3299.00,
        sale: 978.00,
        color: '黑色',
        evaluate: 28,
        sales: 1213
    }, {
        id: '012',
        name: '荣耀7',
        imgurl: 'img/honor7.jpg',
        price: 1976.00,
        sale: 1899.00,
        color: '白色',
        evaluate: 3243,
        sales: 123
    }];
    var pro = document.getElementById("product")

    function fn(arr) {
        for (var i = 0; i < arr.length; i++) {
            pro.innerHTML += '<li>' +
                '<img src=' + arr[i].imgurl + ' alt="">' +
                '<h6>' + arr[i].name + '</h6>' +
                '<span>￥' + arr[i].price + '</span>' +
                '<p>颜色：' + arr[i].color + '</p>' +
                '<p>评价：' + arr[i].evaluate + '</p>' +
                '<p>销量：' + arr[i].sales + '</p>' +
                '</li>'
        }
    }
    fn(data);

    var price = document.getElementById("price")
    var sale = document.getElementById("sale")
    var jiaping = document.getElementById("pingjia")


    price.onclick = function () {
        data.sort(function (a, b) {
            return a.price - b.price
        })
        pro.innerHTML = ""
        fn(data)
    }

    sale.onclick = function () {
        data.sort(function (a, b) {
            return a.sales - b.sales
        })
        pro.innerHTML = ""
        fn(data)
    }
    pingjia.onclick = function () {
        data.sort(function (a, b) {
            return a.evaluate - b.evaluate
        })
        pro.innerHTML = ""
        fn(data)
    }



</script>

</html>